<template>
  <div class="">
    <el-tag
      class="mr10 mb5 fl"
      v-for="(tag, index) in list"
      :key="tag.id"
      @close="handleDelete(index)"
      closable>
      {{tag.nickname}}
    </el-tag>
    <div class="el-icon-plus cc-add mb5 fl" title="新增抄送用户" @click="handleAdd" />
    <Dialog ref="dialog" :get-data="getList" :info="dialog" />
  </div>
</template>

<script>
import Dialog from './staff-dialog'
import { queryStaffById } from '@/api/staff'

export default {
  name: 'VerifyCC',
  components: { Dialog },
  props: {
    value: {
      type: String,
      default: null
    },
    ccs: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      dialog: {
        edit: {},
        title: '',
        type: ''
      },
      list: [],
      visible: false
    }
  },
  watch: {
    list: {
      handler(n, o) {
        this.selChange()
      },
      immediate: false,
      deep: true
    },
    ccs: {
      handler(n, o) {
        if(this.ccs && this.ccs !== ''){
          let arr = JSON.parse(this.ccs)
          arr.forEach(o => {
            this.list.push(o)
          })
        }
      },
      immediate: false,
      deep: true
    }
  },
  created() {
  },
  methods: {
    selChange() {
      let arr = []
      this.list.forEach(o => {
        arr.push(o.id)
      })
      this.$emit('input', arr.join(','))
    },
    getList(e) {
      let j = {}
      this.list.forEach(o => {
        j[o.id] = o.id
      })
      if(j[e]) return
      queryStaffById({id: e}).then(response => {
        this.list.push(response.staff)
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    handleDelete(e) {
      this.list.splice(e, 1)
    },
    handleAdd(e) {
      this.dialog.title = '抄送用户'
      this.dialog.type = 'add'
      this.$set(this.dialog.edit, 'su_id', '')
      this.$refs['dialog'].visible = true
    },
    handleCancel(done) {
      if (this.$refs['formDate']) this.$refs['formDate'].resetFields()
      if (done && typeof done === Function) {
        done()
      } else {
        this.visible = false
      }
    }
  }
}
</script>

<style scoped>
.cc-add{
  border: 1px dashed #c0ccda;
  height: 28px;
  line-height: 28px;
  width: 50px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
}
</style>
